<template>
	<view class="recommend">
		<view class="title acea-row row-center-wrapper">
			<!-- <text class='iconfont icon-zhuangshixian'></text> -->
			<text class="name">{{ $t(`page.goodsSearch.recommend`) }}</text>
			<!-- <text class='iconfont icon-zhuangshixian lefticon'></text> -->
		</view>
		<view class="recommendList acea-row row-between-wrapper">
			<WaterfallsFlow
				:wfList="tempArr"
				@itemTap="godDetail"
				:type="1"
				:isStore="1"
			/>
		</view>
		<view class="loadingicon acea-row row-center-wrapper" v-if="goodScroll">
			<text
				class="loading iconfont icon-jiazai"
				:hidden="loading == false"
			></text>
		</view>
		<view class="text-center pb-20" v-if="!goodScroll">
			<text>{{ $t(`page.goodsList.no`) }}</text>
		</view>
	</view>
</template>

<script>
import { goShopDetail } from "@/libs/order.js";
import { getGroomList } from "@/api/store.js";
import WaterfallsFlow from "@/components/WaterfallsFlow/WaterfallsFlow.vue";
export default {
	name: "recommend",
	components: {
		WaterfallsFlow,
	},
	// props: {
	// 	hostProduct: {
	// 		type: Array,
	// 		default: function() {
	// 			return [];
	// 		}
	// 	}
	// },
	data() {
		return {
			goodScroll: true,
			params: {
				//精品推荐分页
				page: 1,
				limit: 10,
			},
			loading: false,
			tempArr: [],
		};
	},
	mounted() {
		this.get_host_product();
	},

	methods: {
		get_host_product: function () {
			this.loading = true;
			if (!this.goodScroll) return;
			getGroomList(this.params).then(({ data }) => {
				this.iSshowH = false;
				this.loading = false;
				this.goodScroll = data.list.length >= this.params.limit;
				this.params.page++;
				this.tempArr = this.tempArr.concat(data.list);
			});
		},
		godDetail(item) {
			goShopDetail(item);
		},
	},
	onReachBottom() {
		this.get_host_product();
	},
};
</script>

<style scoped lang="scss">
.recommend {
	background-color: #fff;
	border-radius: 20rpx;
}

.recommend .title {
	height: 100rpx;
	line-height: 100rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: #282828;
	justify-content: flex-start;
}

.recommend .title .name {
	margin: 0 28rpx;
}

.recommend .title .iconfont {
	font-size: 170rpx;
	color: #454545;
}

.recommend .title .iconfont.lefticon {
	transform: rotate(180deg);
}

.recommend .recommendList {
	padding-left: 30rpx;
	/* #ifdef H5 */
	padding-bottom: 50rpx;
	/* #endif */
}

.recommend .recommendList .item {
	width: 335rpx;
	margin-bottom: 30rpx;
}

.recommend .recommendList .item .pictrue {
	position: relative;
	width: 100%;
	height: 335rpx;
}

.recommend .recommendList .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 14rpx;
}

.recommend .recommendList .item .name {
	font-size: 28rpx;
	color: #282828;
	margin-top: 20rpx;
}

.money {
	font-size: 20rpx;
	margin-top: 8rpx;
	font-weight: 600;
	@include price_color(theme);
}

.recommend .recommendList .item .money .num {
	font-size: 28rpx;
	@include price_color(theme);
}
</style>
